import { Button, Image, ImageViewer, NavBar, Toast } from "antd-mobile";
import { useEffect } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import $fetch from "../../../utils/app/$fetch";
import $reducer from "../../../utils/app/$reducer";
import "./style.scss";

const GoodsDetailPage = () => {
  const navigate: any = useNavigate();
  const location: any = useLocation();
  const goodsId = location?.state?.goodsId;
  const initState: any = {
    goodsDetail: {},
    cartList: [],
    totalNum: 0,
    visible: false,
  };
  const [state, dispatch] = $reducer({ ...initState });

  useEffect(() => {
    if (!goodsId) return;
    initPage();
    queryCartList();
  }, []);

  const queryCartList = async () => {
    const cartRes: any = await $fetch("cart/list", {}, { loading: false });
    dispatch({ cartList: cartRes, totalNum: cartRes?.length });
  };

  const initPage = async () => {
    const res: any = await $fetch(`goods/goodsDetail/${goodsId}`);
    dispatch({ goodsDetail: res });
  };

  const handleAddCart = async () => {
    // 商品id 商品名称 商品图片 价格和数量
    const res = await $fetch(
      "cart/add",
      {
        ...state?.goodsDetail,
        goodsPhoto: state?.goodsDetail?.goodsThumbnail,
        quantity: 1,
        price: state?.goodsDetail?.goodsPrice,
        // goodsId: goodsDetail?.goodsId,
        // goodsName:
      },
      { method: "post", loading: false }
    );
    await queryCartList();
    Toast.show("加入购物车成功");
  };

  // const handleBuy = () => {
  //   const goods = {
  //     ...state?.goodsDetail,
  //     price: state?.goodsDetail?.goodsPrice,
  //     quantity: 1,
  //   };
  //   navigate("/goods/order", { state: { goods: [goods] } });
  // };

  const back = () => {
    window.history.go(-1);
  };

  return (
    <div className="container_goods_order">
      <NavBar
        style={{
          "--border-bottom": "1px #eee solid",
        }}
        onBack={back}
      >
        商品详情
      </NavBar>
      <ul className="that_banner_wraper">
        <Image
          src={state?.goodsDetail?.goodsPhoto}
          fit="cover"
          lazy={true}
          width="100%"
          height="100%"
          placeholder={<Image src="" width="100%" height="4rem" />}
          onClick={() => {
            dispatch({ visible: true });
          }}
        />
        <ImageViewer
          image={state?.goodsDetail?.goodsPhoto}
          visible={state?.visible}
          onClose={() => {
            dispatch({ visible: false });
          }}
        />
      </ul>
      <div className="that_good_detail">
        <div>{state?.goodsDetail?.goodsName}</div>
        <div className="price">￥{state?.goodsDetail?.goodsPrice}</div>
        <div style={{ marginTop: '20px', marginBottom: '70px', whiteSpace: 'pre-wrap', fontSize: '16px'}}>{state?.goodsDetail?.goodsInstruction}</div>
      </div>
      <div className="that_footer">
        <div>
          <div>
            <i
              className="iconfont"
              onClick={() => {
                navigate("/goods/cart");
              }}
            >
              &#xe63b;
            </i>
            {state?.totalNum > 0 && (
              <span className="num">{state?.totalNum}</span>
            )}
          </div>
          <div className="cart">购物车</div>
        </div>
        <Button onClick={handleAddCart}>加入购物车</Button>
      </div>
    </div>
  );
};

export default GoodsDetailPage;
